<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <#include "../common/header.ftl">

</head>
<body>

<div class="container " style="margin-top: 20px">
    <#include "../common/top.ftl">
    <div class="row">
        <div class="col-sm-3">
            <#include "../common/menu.ftl">
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class="page-head-line">潜在客户报表</h1>
                </div>
            </div>
            <!--高级查询--->
            <form class="form-inline" id="searchForm" action="/chart/list.do" method="post">

                <div class="form-group">
                    <label>营销人员:</label>
                    <input type="text" class="form-control" name="sellerName" value="${(qo.sellerName)!}" placeholder="请输入营销人员">
                </div>
                <div class="form-group">
                    <label>时间:</label>
                    <input type="text" class="form-control begin" name="beginDate" value="${(qo.beginDate?string("y-M-d"))!}" placeholder="请选择开始时间">
                    ~
                    <input type="text" class="form-control end" name="endDate" value="${(qo.endDate?string("y-M-d"))!}" placeholder="请选择结束时间">
                </div>
                <div class="form-group">
                    <label for="dept">分组类型:</label>
                    <select class="form-control" name="groupType">
                        <option value="seller.name">营销人员</option>
                        <option value="DATE_FORMAT(c.inputTime,'%Y')">年份</option>
                        <option value="DATE_FORMAT(c.inputTime,'%Y-%m')">月份</option>
                        <option value="DATE_FORMAT(c.inputTime,'%Y-%m-%d')">日期</option>
                    </select>
                    <script>
                        $("#searchForm select[name='groupType']").val("${qo.groupType}");
                    </script>
                </div>

                <button class="btn btn-default">
                    <span class="glyphicon glyphicon-search"></span> 查询
                </button>
                <button type="button" class="btn btn-success" id="barBtn">
                    <span class="glyphicon glyphicon-film"></span> 柱状图
                </button>
                <button type="button" class="btn btn-success" id="pieBtn">
                    <span class="glyphicon glyphicon-film"></span> 饼状图
                </button>
            </form>

            <table class="table table-striped table-hover">
                <tr>
                    <th>编号</th>
                    <th>分组名称</th>
                    <th>新增客户数</th>
                </tr>
                <#list list as entity>
                    <tr>
                        <td>${entity_index+1}</td>
                        <td>${entity.groupType}</td>
                        <td>${entity.totalNumber}</td>
                    </tr>
                </#list>
            </table>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="chartModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">

        </div>
    </div>
</div>
<script>
    $('.begin').click(function () {
        WdatePicker({
            readOnly:true,
            maxDate:new Date()
        });
    });
    $('.end').click(function () {
        WdatePicker({
            readOnly:true,
            minDate:$('.begin').val(),
            maxDate:new Date()
        });
    });
    // 查数据填到模态框中
    $('#barBtn').click(function () {
        //清除缓存
        $('#chartModal').removeData("bs.modal");
        $('#chartModal').modal({
            // 发送请求访问服务器拿到写到模态框中的数据
            // 序列化提交参数
            remote:"/chart/bar.do?"+$('#searchForm').serialize()
        });
    });

    // 查数据填到模态框中
    $('#pieBtn').click(function () {
        //清除缓存
        $('#chartModal').removeData("bs.modal");
        $('#chartModal').modal({
            // 发送请求访问服务器拿到写到模态框中的数据
            // 序列化提交参数
            remote:"/chart/pie.do?"+$('#searchForm').serialize()
        });
    });
</script>
</body>
</html>